<style scoped>
.icon {
  width: 12em;
  height: 12em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.ivu-icon {
  font-size: 24px;
}

.layout-nav {
  width: 500px;
  margin: 0 auto;
  margin-right: 20px;
}

.ivu-menu-horizontal {
  height: 0px;
  background: #ffffff;
}

.ivu-layout-header {
  background: #ffffff;
}

.ivu-layout {
  background: #ffffff;
}

.ivu-layout-footer {
  background: #ffffff;
  color: #000000;
  font-size: 17px;
  padding: 6% 0;
}

.layout-footer-center {
  text-align: center;
}

.notBigSearch {
  width: 45%;
}
</style>
<template>
  <div>
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="light" active-name="search" @on-select="menuSelect">
          <div class="layout-nav">
            <MenuItem name="search">
            <Icon type="ios-cloud-download"></Icon>
            搜索下载
            </MenuItem>
            <MenuItem name="music" @click="error(false)">
            <Icon type="music-note"></Icon>
            音乐专区
            </MenuItem>
            <MenuItem name="about" @click="error(false)">
            <Icon type="ios-people"></Icon>
            关于我们
            </MenuItem>
            <MenuItem name="leave" @click="error(false)">
            <Icon type="calendar"></Icon>
            留言板
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Content :style="{padding: '0 50px'}">

        <Input v-show="!isSearchSuccess" class="notBigSearch" v-model="inputValue" size="large" placeholder="输入想搜索内容">
        <Select v-model="searchSelect" slot="prepend" style="width: 80px">
          <Option v-for=" item in searchOption" :key="item.value" :value="item.value">{{item.label}}</Option>
        </Select>
        <Button slot="append" icon="ios-search" @click="searchButton">搜索一下</Button>
        </Input>

        <Row v-show="isSearchSuccess">
          <Col offset="11" span="13">
          <p style="height: 140px"> </p>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-whale__easyiconnet"></use>
          </svg>
          <p style="height: 5px"> </p>
          </Col>
          <Col span="10" offset="7" justify="center">
          <Input v-model="inputValue" size="large" placeholder="输入想搜索内容">
          <Select v-model="searchSelect" slot="prepend" style="width: 80px">
            <Option v-for=" item in searchOption" :key="item.value" :value="item.value">{{item.label}}</Option>
          </Select>
          <Button slot="append" icon="ios-search" @click="searchButton">搜索一下</Button>
          </Input>
          </Col>
        </Row>

        <div v-show="!isSearchSuccess">
          <p style="height: 10px"></p>
          <Table :columns="columns10" :data="data9"></Table>
          <p style="height: 5px"></p>
          <Page :total="100" show-total></Page>
        </div>
      </Content>
      <Footer v-show="false" :style="{position: 'fixed', width: '100%'}" class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
    </Layout>
  </div>
</template>
<script>
import expandRow from './table-expand.vue'

export default {
  components: { expandRow },
  data() {
    return {
      inputValue: '',
      searchSelect: 1,
      isSearchSuccess: true,
      searchOption: [
        {
          label: '全部',
          value: 1
        }
      ],
      columns10: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '文件内容',
          key: 'name'
        },
        {
          title: '分享时间',
          key: 'age'
        },
        {
          title: '操作',
          key: 'address'
        }
      ],
      data9: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          job: 'Data engineer',
          interest: 'badminton',
          birthday: '1991-05-14',
          book: 'Steve Jobs',
          movie: 'The Prestige',
          music: 'I Cry'
        },
        {
          name: 'Jim Green',
          age: 25,
          address: 'London No. 1 Lake Park',
          job: 'Data Scientist',
          interest: 'volleyball',
          birthday: '1989-03-18',
          book: 'My Struggle',
          movie: 'Roman Holiday',
          music: 'My Heart Will Go On'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          job: 'Data Product Manager',
          interest: 'tennis',
          birthday: '1992-01-31',
          book: 'Win',
          movie: 'Jobs',
          music: 'Don’t Cry'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          job: 'Data Analyst',
          interest: 'snooker',
          birthday: '1988-7-25',
          book: 'A Dream in Red Mansions',
          movie: 'A Chinese Ghost Story',
          music: 'actor'
        }
      ]
    }
  },
  methods: {
    info(nodesc) {
      this.$Notice.info({
        title: 'Notification title',
        desc: nodesc
          ? ''
          : 'Here is the notification description. Here is the notification description. '
      })
    },
    success(nodesc) {
      this.$Notice.success({
        title: 'Notification title',
        desc: nodesc
          ? ''
          : 'Here is the notification description. Here is the notification description. '
      })
    },
    warning(nodesc) {
      this.$Notice.warning({
        title: 'Notification title',
        desc: nodesc
          ? ''
          : 'Here is the notification description. Here is the notification description. '
      })
    },
    error(nodesc) {
      this.$Notice.error({
        title: '错误通知',
        desc: nodesc ? '' : '亲，不要急，正在开发中哦！！ '
      })
    },
    menuSelect(name) {
      this.error(false)
    },
    searchButton() {
      if (this.isSearchSuccess) {
        this.isSearchSuccess = false
      } else {
        this.isSearchSuccess = true
      }
    }
  }
}
</script>
